<template>
	<view class="item" @click="handleNavigate">
		<image class="item-img" :src="item.img"></image>
		<view class="xx">
			<text>{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: {
			type: Object,
			required: true
		}
	});
	
	const handleNavigate = () => {
		uni.navigateTo({
			url: props.item.url
		});
	};
</script>

<style scoped lang="scss">
.item {
	width: 150rpx;
	height: 137rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 44rpx;
}

.item-img {
	width: 87rpx;
	height: 87rpx;
}

.xx {
	font-size: 23rpx;
}
</style>